<template>
    <div class="tab_bar">
       <div 
            class="tab_bar_link"
            v-for="(item,index) in tabBar"
            :key="index"
            :class="{active:activeIndex===index}"
            @click="tabChange(index,item,$event)"
       >
        {{item.title}}
       </div>
    </div>
</template>

<script>
    export default {
        name:'TabBar',
        props:{
            tabBar:{
                type: Array,
                default: () => []
            }
        },
        watch: {
            tabBar() {
                activeIndex:0
            }
        },
        data() {
            return {
                activeIndex:0
            }
        },
        methods: {
            tabChange(index,item,e) {
                this.activeIndex = index;
                // 派发给home
                this.$emit('change',item)
            },
            // 下方滚轮
            // scrollAnimate(item) {

            // }
        },
    }
</script>

<style lang="scss" scoped>
.tab_bar{
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: #eee;
    margin-top: 10px;
    // display: flex;
    justify-content: space-between;
    overflow: auto;
    .tab_bar_link{
            &.active {
             color: #FE3113;
             border-bottom: 1px solid orange;
         &::after {
          content: "";
          display: block;
          height: 2px;
          width: 40px;
          background: #FE3113;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
            }
        }

    }
</style>